<template>
  <div>
    <div class="add"><el-link type="primary" @click="handleAdd">发布新闻</el-link></div>
    <div v-if="!hasData" class="tips">暂无新闻</div>
    <div v-if="hasData" class="sw">
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="postTime"
        label="时间"
        width="120">
      </el-table-column>
      <el-table-column
        prop="newsType"
        label="分类"
        width="100">
      </el-table-column>
      <el-table-column
        prop="newsTitle"
        label="标题"
        :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column
        label="操作"
        width="140">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
          <el-button type="text" size="small" @click="open(scope.row)">编辑</el-button>
          <el-button type="text" size="small" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

      <div class="block" v-show="pages!== 10">
        <el-pagination
          layout="prev, pager, next"
          :total="pages"
          :current-page.sync="currentPage"
          @current-change="changePage">
        </el-pagination>
      </div>
      <el-dialog title="修改新闻" :visible.sync="dialogVisible" width="800px" :close-on-click-modal=false>
        <el-form ref="form" :model="form" label-width="80px" :rules="rule">
          <el-form-item label="新闻标题" prop="title">
            <el-input v-model="form.title"></el-input>
          </el-form-item>
          <el-form-item label="新闻分类" prop="type">
            <el-select v-model="form.type" placeholder="请选择新闻分类">
              <el-option label="旅游" value="1"></el-option>
              <el-option label="美食" value="2"></el-option>
              <el-option label="礼仪" value="3"></el-option>
              <el-option label="购物" value="4"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <editor-bar v-model="form.content" :isClear="isClear" prop="content"></editor-bar>
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button @click="resetForm()">重置</el-button>
        <el-button type="primary" @click="check">确 定</el-button>
      </el-dialog>
      <el-dialog title="发布新闻" :visible.sync="dialogAdd" width="800px" :close-on-click-modal=false>
        <el-form ref="addForm" :model="addForm" label-width="80px" :rules="addRule">
          <el-form-item label="新闻标题" prop="title">
            <el-input v-model="addForm.title"></el-input>
          </el-form-item>
          <el-form-item label="新闻分类" prop="type">
            <el-select v-model="addForm.type" placeholder="请选择新闻分类">
              <el-option label="旅游" value="1"></el-option>
              <el-option label="美食" value="2"></el-option>
              <el-option label="礼仪" value="3"></el-option>
              <el-option label="购物" value="4"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <editor-bar v-model="addForm.content" :isClear="isClear" prop="content"></editor-bar>
        <el-button  @click="dialogAdd = false">取消</el-button>
        <el-button  @click="toAdd" type="primary">确认</el-button>
      </el-dialog>
      <el-dialog :title="title" :visible.sync="dialogOpen" width="800px">
        <div id="content">
          <dl v-html="content">
            {{content}}
          </dl>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import EditorBar from '@/components/wangEnduit'
export default {
  name: 'pcNews',
  data () {
    let checkAll = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('不能为空'))
      }
      setTimeout(() => {
        callback()
      }, 100)
    }
    return {
      tableData: '',
      isClear: false,
      detail: '',
      dialogVisible: false,
      pages: 10,
      currentPage: 1,
      hasData: false,
      news: '',
      dialogAdd: false,
      addForm: {
        title: '',
        type: '',
        content: ''
      },
      form: {
        title: '',
        type: '',
        content: '',
        no: ''
      },
      addRule: {
        title: [
          { validator: checkAll, trigger: 'blur' }
        ],
        type: [
          { validator: checkAll, trigger: 'blur' }
        ],
        content: [
          { validator: checkAll, trigger: 'blur' }
        ]
      },
      rule: {
        title: [
          { validator: checkAll, trigger: 'blur' }
        ],
        type: [
          { validator: checkAll, trigger: 'blur' }
        ],
        content: [
          { validator: checkAll, trigger: 'blur' }
        ]
      },
      oldContent: '',
      title: '',
      content: '',
      dialogOpen: false
    }
  },
  methods: {
    type (type) {
      let result
      switch (type) {
        case '旅游':
          result = '1'
          break
        case '美食':
          result = '2'
          break
        case '礼仪':
          result = '3'
          break
        case '购物':
          result = '4'
          break
        default:
          break
      }
      return result
    },
    handleClick (row) {
      this.dialogOpen = true
      this.title = row['newsTitle']
      this.content = row['newsContent']
    },
    open (row) {
      this.dialogVisible = true
      let str = JSON.stringify(this.form)
      let form = JSON.parse(str)
      form['no'] = row['newsNo']
      form['title'] = row['newsTitle']
      form['type'] = this.type(row['newsType'])
      form['content'] = row['newsContent']
      this.oldContent = row['newsContent']
      this.form = form
    },
    check () {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.form.content === '' || this.form.content === '<p><br></p>') {
            this.$message.error('新闻内容不能为空')
          } else {
            this.http.post(this.ports.personalCenter.employee.news + '/' + this.form.no, {
              type: this.form.type,
              title: this.form.title,
              content: this.form.content
            }, res => {
              if (res.status === 200) {
                let data = res.data.result
                if (data.code === 200) {
                  this.$message({
                    showClose: true,
                    message: data.msg,
                    type: 'success'
                  })
                  this.dialogVisible = false
                  this.getData(this.currentPage)
                } else if (data.code === 1 || data.code === -1) {
                  this.$message({
                    showClose: true,
                    message: data.msg,
                    type: 'error'
                  })
                }
              } else {
                console.log(res)
              }
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    changePage () {
      this.getData(this.currentPage)
    },
    getData (page) {
      this.http.get(this.ports.personalCenter.employee.news + '?page=' + page,
        res => {
          if (res.status === 200) {
            let data = res.data.result
            if (data.code === 200) {
              this.hasData = true
              this.tableData = data.msg
              this.pages = data.pages * 10
              console.log(this.tableData)
              console.log(data.msg)
              if (this.tableData.length === 0) {
                this.getData(data.pages)
              }
            } else if (data.code === 1 || data.code === -1) {
              this.hasData = false
            }
          } else if (res.status === 401) {
            this.$router.push('/')
          } else {
            console.log(res)
          }
        })
    },
    handleAdd () {
      this.dialogAdd = true
    },
    toAdd () {
      this.$refs['addForm'].validate((valid) => {
        if (valid) {
          if (this.addForm.content === '' || this.addForm.content === '<p><br></p>') {
            this.$message.error('新闻内容不能为空')
          } else {
            this.http.post(this.ports.personalCenter.employee.news, {
              type: this.addForm.type,
              title: this.addForm.title,
              content: this.addForm.content
            }, res => {
              if (res.status === 200) {
                let data = res.data.result
                if (data.code === 200) {
                  this.$message({
                    showClose: true,
                    message: data.msg,
                    type: 'success'
                  })
                  this.dialogAdd = false
                  this.getData(this.currentPage)
                } else if (data.code === 1 || data.code === -1) {
                  this.$message({
                    showClose: true,
                    message: data.msg,
                    type: 'error'
                  })
                }
              } else {
                console.log(res)
              }
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm () {
      this.$refs['form'].resetFields()
      this.form.content = this.oldContent
    },
    handleDelete (row) {
      this.http.delete(this.ports.personalCenter.employee.news + '/' + row.newsNo,
        res => {
          if (res.status === 200) {
            let data = res.data.result
            if (data.code === 200) {
              this.$message({
                message: data.msg,
                type: 'success'
              })
              this.getData(this.currentPage)
            } else if (data.code === 1 || data.code === -1) {
              this.$message.error('删除失败')
            }
          } else if (res.status === 401) {
            this.$router.push('/')
          } else {
            console.log(res)
          }
        })
    }
  },
  components: {
    EditorBar
  },
  mounted: function () {
    this.getData(1)
  },
  watch: {
    dialogAdd: function (val) {
      if (val) {
        this.$refs['addForm'].resetFields()
        this.addForm.content = ''
      }
    }
  }
}
</script>

<style  lang="scss" scoped>
  .block{
    padding: 0;
    margin: 50px 0 100px 0;
  }
  .tips {
    margin-top: 100px;
    color: #5e5e5e;
  }
  .add {
    text-align: right;
    margin-bottom: 0.5rem;
    padding-right: 0.5rem;
    margin-top: 0.2rem;
  }
  .el-input,.el-select {
    width: 300px;
  }
  .el-form-item {
    width: 400px;
  }
  .el-dialog .el-button {
    margin-top: 20px;
  }
  #content {
    padding: 0 10px;
    text-align: left;
  }
  /* table 样式 */
  #content /deep/ table {
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
  }
  #content /deep/ table td,
  #content /deep/ table th {
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ccc;
    padding: 3px 5px;
  }
  #content /deep/ table th {
    border-bottom: 2px solid #ccc;
    text-align: center;
  }
  /* blockquote 样式 */
  #content /deep/ blockquote {
    display: block;
    border-left: 8px solid #d0e5f2 !important;
    padding: 5px 10px;
    margin: 10px 0;
    line-height: 1.4;
    font-size: 100%;
    background-color: #f1f1f1;
  }
  /* code 样式 */
  #content /deep/ code {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    background-color: #f1f1f1;
    border-radius: 3px;
    padding: 3px 5px;
    margin: 0 3px;
  }
  #content /deep/ pre code {
    display: block;
  }
  /* ul ol 样式 */
  #content /deep/ ul, ol {
    margin: 10px 0 10px 20px;
  }
  .sw {
    margin-bottom: 100px;
  }
</style>
